/* 搜索区域样式 */
.search-section {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 80rpx;
	padding: 10rpx 3% 10rpx 3%;
	background-color: #fff;
	z-index: 1000;
	box-sizing: border-box;
	border-bottom: 1px solid #f0f0f0;

	.search-box {
		display: flex;
		align-items: center;
		background-color: #dbdbde;
		height: 60rpx;
		border-radius: 20px;
		padding: 0 30rpx;
		width: 100%;
		
		.placeholder {
			margin-left: 16rpx;
			font-size: 28rpx;
			color: #8c8f95;
		}
	}
}

/* 为固定搜索框添加内容间距 */
.content-wrapper {
	padding-top: 100rpx;
}

/* 标签栏样式 */
.tab-scroll {
	width: 100%;
	overflow-x: auto;
	white-space: nowrap;
	background-color: #fff;
}

.tab-bar {
	display: flex;
	padding: 10px 0;
	border-bottom: 1px solid #f0f0f0;
}

.tab-item {
	padding: 0 20px;
	margin: 0 10px;
	text-align: center;
	position: relative;
	font-size: 32rpx;
	color: #333;

	text {
		display: inline-block;
		padding: 5px 0;
	}

	&.active {
		color: #38adff;
		font-weight: bold;

		&::after {
			content: '';
			display: block;
			width: 24rpx;
			height: 4rpx;
			background-color: #38adff;
			border-radius: 2rpx;
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
		}
	}
}

/* 内容滚动区域样式 */
.article-scroll {
  flex: 1;
  height: calc(100vh - 200rpx); /* 减去搜索栏和标签栏的高度 */
}

/* 内容列表样式 */
.article-list {
  padding: 0 20rpx;
  
  .article-item {
    padding: 20rpx 0;
    border-bottom: 1px solid #f0f0f0;
		
		.user-info {
			width: 100%;
			display: inline-flex;
			font-size: small;
			align-items: center;
			
			.user-image {
				width: 30px;
				height: 30px;
				border-radius: 50%;
			}
			
			.user-name {
				margin-left: 10px;
				color: rgb(110, 109, 109);
			}
		}
		
		.article-main {
			margin-top: 10px;
			display: flex;
			width: 100%;
			
			.article-content {
				margin-right: 10px;
				flex-grow: 1;
				
				.article-title {
					font-weight: bold;
					text-overflow: clip;
					overflow: hidden;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
				}
				
				.article-subtitle {
					margin-top: 10px;
					font-size: smaller;
					color: gray;
					text-overflow: ellipsis;
					overflow: hidden;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
				}
			}
			
			.article-url {
				width: 80px;
				height: 50px;
				flex-shrink: 0;
			}
		}
		
		.article-footer {
			margin-top: 10px;
			width: 100%;
			color: gray;
			font-size: x-small;
			display: inline-flex;
			align-items: center;
			
			.article-read {
				display: inline-flex;
				align-items: center;
				
				image {
					width: 20px;
					height: 20px;
				}
				
				text {
					padding: 0 8px;
					margin-right: 20px;
				}
			}
		}
  }
}

/* 加载更多提示样式 */
.loading-more {
  padding: 30rpx 0;
  text-align: center;
  color: #999;
  font-size: 28rpx;
}

/* 没有更多数据提示样式 */
.no-more {
  padding: 30rpx 0;
  text-align: center;
  color: #999;
  font-size: 28rpx;
}